import React from 'react';
import {connect} from 'react-redux';
import { NavBar, Icon } from 'antd-mobile';
import {Switch, Route, Redirect} from 'react-router-dom';
import {getMsgList,getMsgRecv} from '../../redux/chat';

import Boss from '../../container/boss/boss';
import Genius from '../../container/genius/genius';
import TabBarLink from '../tabBarLink/tabBarLink';
import UserCanter from '../userCanter/userCanter';
import Msg from '../msg/msg';

import {userListAxios} from '../../redux/userListInfo';


import '../../index.css';

class Dashboard extends React.Component{
    componentDidMount() {
        setTimeout(() => {
            console.log(this.props);
            this.props.userListAxios(this.props.state.registerReducer.type==='boss'?'genius':'boss');
            this.props.getMsgList(this.props.state.registerReducer._id);
            this.props.getMsgRecv();
        }, 300);
    }
    render() {
        // 过滤消息得到真正未读的消息：read为false且不是自己发的消息
        let unreadNum = this.props.state.msgReducer.msgLst.filter(v=>(v.read===false&&v.to===this.props.state.registerReducer._id)).length;
        console.log(unreadNum);
        const state = this.props.state.registerReducer;
        console.log(this.props);
        const pathName = this.props.location.pathname;
        const dashboardList = [
            {
                path:'/dashboard/boss',
                text:'牛人',
                title:'牛人列表',
                icon:'boss',
                component:Boss,
                hide:state.type === 'genius'
            },
            {
                path:'/dashboard/genius',
                text:'BOSS',
                title:'BOSS列表',
                icon:'job',
                component:Genius,
                hide:state.type === 'boss'
            },
            {
                path:'/dashboard/msg',
                text:'消息',
                title:'消息中心',
                icon:'msg',
                component:Msg,
            },
            {
                path:'/dashboard/userCanter',
                text:'个人',
                title:'个人中心',
                icon:'user',
                component:UserCanter,
            },
        ]
        return (
            <div>
                <NavBar
                    className="fixd-header"
                    mode="dark"
                    icon={<Icon type="left" />}
                    onLeftClick={() => console.log('onLeftClick')}
                    rightContent={[
                        <Icon key="1" type="ellipsis" />,
                    ]}
                    >
                    {dashboardList.find(item=>(item.path === pathName))?dashboardList.find(item=>(item.path === pathName)).title:<Redirect to="/dashboard/userCanter"></Redirect>}
                </NavBar>
                <div className="page-content">
                    <Switch>
                        {dashboardList.map((item) => (
                            <Route key={item.text} path={item.path} component={item.component}></Route>
                        ))}
                    </Switch>
                </div>                
                <TabBarLink 
                    data={dashboardList}
                    badge={unreadNum}
                ></TabBarLink>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        state:state
    }    
}
const mapDispatchToProps = {getMsgList,getMsgRecv,userListAxios};
export default connect(mapStateToProps,mapDispatchToProps)(Dashboard);